<template>
	<view class="page">
		<view class="box">
			<view class="li flex-between align-center" v-if="user.phone">
				<text class="key">手机号</text>
				<text class="value">{{ user.phone }}</text>
			</view>
			<view class="li flex-between align-center" v-else @click="show20 = true">
				<text class="key">绑定手机号</text>
				<image src="../../static/more.png" style="width: 40rpx; height: 40rpx;"></image>
			</view>
			<view class="li flex-between align-center">
				<text class="key">我的会员</text>
				<text class="value">{{ user.membershipName ? user.membershipName : '基础会员' }}</text>
			</view>
			<view class="li flex-between align-center">
				<text class="key">隐私政策</text>
				<image src="../../static/more.png" style="width: 40rpx; height: 40rpx;"></image>
			</view>
		</view>
		<view class="botVue">
			<view class="btn margin0" @click="show = true">退出登录</view>
		</view>
		
		<u-popup v-model="show20" mode="center" border-radius="12">
			<view class="popVue">
				<view class="title text-center">绑定手机号</view>
				<view class="inpVue">
					<view class="label">手机号</view>
					<view class="flex">
						<input type="number" v-model="name" placeholder="请输入手机号"/>
					</view>
				</view>
				<view class="inpVue margin50">
					<view class="label">验证码</view>
					<view class="flex align-center">
						<input type="number" v-model="code" placeholder="请输入验证码"/>
						<view class="code" @click="sendCode()">{{ text }}</view>
					</view>
				</view>
				<view class="loginBtn margin40" @click="bandFun()">确认</view>
			</view>
		</u-popup>
		
		<!-- 退出登录 -->
		<u-modal v-model="show" content="确认退出登录？" confirm-color="#18AB4E" :show-cancel-button="true" @confirm="logoutFun"></u-modal>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				show: false,
				show20: false,
				code: "",
				text: '获取验证码',
				isSend: false,
				name: ""
			}
		},
		computed: {
			...mapState({
				user: state=> state.user
			})
		},
		methods: {
			async bandFun(){
				if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
				if (!this.code) return this.$u.toast("请输入验证码")
				const res = await this.$request('/aiet-user-center/user/bindPhone', {
					phone: this.name,
					code: this.code
				})
				if(res.code===200) {
					this.show20 = false
					this.name = ""
					this.code = ""
					this.$u.toast("绑定成功")
					uni.setStorageSync("ai-token", res.data.token)
					this.$store.dispatch("getUser")
					this.$store.state.isLogin = true
				}else{
					this.$u.toast(res.msg)
				}
			},
			
			// 退出登录
			async logoutFun(){
				uni.showLoading()
				const res = await this.$request('/aiet-user-center/user/logout')
				if(res.code===200) {
					uni.hideLoading()
					this.$u.toast("退出成功")
					uni.removeStorageSync("ai-token")
					this.$store.state.isLogin = false
					this.$store.state.user = {}
					uni.switchTab({
						url: "./index"
					})
				}else{
					uni.hideLoading()
					this.$u.toast(res.msg)
				}
			},
			
			// 发送验证码
			async sendCode(){
				if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
				if (this.isSend) return
				this.isSend = true;
				uni.showLoading()
				const res = await this.$request('/aiet-user-center/user/sendCode', {
					phone: this.name,
				});
				if (res.code === 200) {
					uni.hideLoading()
					this.$u.toast('发送成功');
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg);
					this.isSend = false;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.popVue {
		width: 690rpx;
		padding: 30rpx;
		.title {
			font-weight: 600;
			color: #000;
		}
		.loginBtn {
			width: 100%;
			height: 88rpx;
			background: #18AB4E;
			border-radius: 44rpx;
			color: #fff;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
		}
		.inpVue {
			width: 100%;
			.label {
				color: #808080;
			}
			input {
				flex: 1;
				height: 88rpx;
				border-radius: 12rpx;
				border: 1rpx solid #ececec;
				padding-left: 30rpx;
				display: block;
				margin-top: 15rpx;
				color: #000;
			}
			.code {
				width: 200rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				margin-top: 15rpx;
				margin-left: 20rpx;
				border-radius: 12rpx;
				background: #f5f5f5;
				color: #fff;
				background: #18AB4E;
			}
		}
	}
	.box {
		width: 100%;
		background: #fff;
		.li {
			width: 100%;
			height: 120rpx;
			border-bottom: 1rpx solid #f5f5f5;
			padding: 0 30rpx;
			.key {
				color: #000;
				font-weight: 600;
			}
			.value {
				color: #A3ACAD;
			}
		}
	}
	.botVue {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 80rpx;
		text {
			color: #888;
			line-height: 1;
		}
		.btn {
			width: 690rpx;
			height: 88rpx;
			background: #18AB4E;
			border-radius: 12rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
		}
	}
</style>